<template>
  <view class="container">
    <uni-nav-bar
      :border="false"
      shadow
      statusBar
      title="更衣柜管理"
      color="#1F1F1F"
      left-icon="left"
      leftWidth="60rpx"
      @clickLeft="onBack"
    >
    </uni-nav-bar>
    <float-button name="locker" />

    <FilterView ref="filterView">
      <template #search>
        <uni-search-bar
          radius="17"
          bgColor="#fff"
          cancelButton="none"
          placeholder="搜索柜号"
          v-model="queryData.number"
          @confirm="onSearch"
          @clear="onSearch"
        ></uni-search-bar>
      </template>
      <template #form>
        <uni-forms
          ref="filterForm"
          v-model="queryData"
          label-position="top"
          label-width="150"
        >
          <uni-row :gutter="26">
            <uni-col :span="24">
              <uni-forms-item label="所在部门" name="deptId">
                <uni-data-picker
                  placeholder="请选择部门"
                  popup-title="请选择部门"
                  :localdata="
                    $util.processingTree(appStore.deptData, 'value', 'parentId')
                  "
                  v-model="queryData.deptId"
                />
              </uni-forms-item>
            </uni-col>
            <uni-col :span="12">
              <uni-forms-item label="选择人员" name="personId">
                <uni-data-select
                  placeholder="请选择"
                  :localdata="
                    appStore.personData.filter((item) =>
                      queryData.deptId ? item.deptId === queryData.deptId : true
                    )
                  "
                  v-model="queryData.personId"
                />
              </uni-forms-item>
            </uni-col>
            <uni-col :span="12">
              <uni-forms-item label="更衣柜号" name="number">
                <uni-easyinput
                  v-model="queryData.number"
                  placeholder="请输入"
                />
              </uni-forms-item>
            </uni-col>
            <uni-col :span="12">
              <uni-forms-item label="职级" name="rank">
                <uni-easyinput v-model="queryData.rank" placeholder="请输入" />
              </uni-forms-item>
            </uni-col>
            <uni-col :span="12">
              <uni-forms-item label="状态" name="status">
                <uni-data-select
                  placeholder="请选择"
                  :localdata="allocateData"
                  v-model="queryData.status"
                />
              </uni-forms-item>
            </uni-col>
            <uni-col :span="12">
              <uni-forms-item label="状况" name="conditions">
                <uni-data-select
                  placeholder="请选择"
                  :localdata="lockerStatus"
                  v-model="queryData.conditions"
                />
              </uni-forms-item>
            </uni-col>
            <!-- <uni-col :span="24">
                            <uni-forms-item label="选择日期" name="date">
                                <uni-datetime-picker 
                                    type="datetimerange" 
                                    v-model="queryData.date" 
                                />
                            </uni-forms-item>
                        </uni-col> -->
          </uni-row>
        </uni-forms>
      </template>
      <template #footer>
        <view class="filterBtn">
          <button class="btn r" type="primary" @click="onReset">重置</button>
          <button class="btn s" type="primary" @click="onSure('filterForm')">
            确定
          </button>
        </view>
      </template>
    </FilterView>

    <view class="listBox">
      <swiper
        class="swiper-box"
        :duration="300"
        :current="current"
        @change="onTabchange"
        @transition="enabled = false"
        @animationfinish="enabled = true"
      >
        <swiper-item class="swiper-item">
          <list-scroll-view
            :ref="'scrollView0'"
            :api="getLockerList"
            height="80vh"
            :init="{}"
            :refresherEnabled="enabled"
          >
            <template v-slot:list="{ data }">
              <view class="box">
                <view
                  class="item"
                  v-for="(item, i) in data"
                  :key="i"
                  @click="onClick(item)"
                >
                  <view class="t">
                    <view class="l">{{
                      $util.selectDictLabel(lData, item.lockerLocationId)
                    }}</view>
                    <view class="r"
                      ><view class="point" />{{ item.number }}</view
                    >
                  </view>
                  <view class="b">
                    <view class="bItem">
                      <view class="name">衣柜状况</view>
                      <view class="value">{{
                        $util.selectDictLabel(lockerStatus, item?.conditions)
                      }}</view>
                    </view>
                    <view class="bItem">
                      <view class="name">姓名</view>
                      <view class="value">{{
                        item.personName ||
                        $util.selectDictLabel(pData, item.personId)
                      }}</view>
                    </view>
                    <view class="bItem">
                      <view class="name">部门</view>
                      <view class="value">{{
                        $util.selectDictLabel(dData, item.deptId)
                      }}</view>
                    </view>
                    <view class="bItem">
                      <view class="name">职级</view>
                      <view class="value">{{ item.rank }}</view>
                    </view>
                    <view class="bItem">
                      <view class="name">分配时间</view>
                      <view class="value">{{ item.claimingTime }}</view>
                    </view>
                  </view>
                  <view
                    :class="{
                      status: true,
                      warn: item.status == 0,
                    }"
                    >{{ $util.selectDictLabel(allocateData, item?.status) }}
                  </view>
                </view>
              </view>
            </template>
            <template #empty>
              <view class="uni-nodata">暂无数据!</view>
            </template>
          </list-scroll-view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
import _ from 'lodash';
import { getPDeptList, getPersonList } from '@/api/index';
import {
  getLockerList,
  getLocationList,
  getLockerGroupList,
} from '@/api/locker';
import useAppStore from '@/store/modules/app';
import FilterView from '@/components/FilterView/index.vue';
import ListScrollView from '@/components/ListScrollView/index.vue';
export default {
  components: {
    FilterView,
    ListScrollView,
  },
  data() {
    return {
      lockerStatus: [
        {
          text: '良好',
          label: '良好',
          value: 0,
        },
        {
          text: '异常',
          label: '异常',
          value: 1,
        },
        {
          text: '维修中',
          label: '维修中',
          value: 2,
        },
      ],
      allocateData: [
        {
          text: '未分配',
          label: '未分配',
          value: 0,
        },
        {
          text: '已分配',
          label: '已分配',
          value: 1,
        },
      ],
      queryData: {},
      dData: [],
      lData: [],
      pData: [],
      // api
      getLockerList,
      // swiper
      current: 0,
      enabled: true,
      data: ['列表'],
      // store
      appStore: useAppStore(),
    };
  },
  onLoad(query) {
    this.$nextTick(() => {
      this.$refs[`scrollView0`].getData(true);
    });
    setTimeout(() => {
      this.initData();
    }, 1000);
  },
  onShow() {},
  methods: {
    onSure(ref) {
      this.$refs[ref]
        .validate()
        .then((res) => {
          this.$refs[`scrollView${this.current}`].searchData(this.queryData);
          this.$refs.filterView.onClose();
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    onReset() {
      this.queryData = this.$options.data().queryData;
    },
    onSearch(e) {
      this.$refs[`scrollView${this.current}`].searchData(this.queryData);
    },
    // 初始数据
    initData() {
      getLocationList().then((res) => {
        this.lData = res.data.map((item) => {
          return {
            text: item.locationName,
            label: item.locationName,
            value: item.lockerLocationId,
          };
        });
        this.appStore.updateAreaData(this.lData);
      });
      getLockerGroupList().then((res) => {
        let pData = res.data.map((item) => {
          return {
            text: item.number,
            label: item.number,
            value: item.lockerGroupId,
            locationId: item.locationId,
          };
        });
        this.appStore.updateGroupData(pData);
      });
      getPersonList().then((res) => {
        this.pData = res.data.map((item) => {
          return {
            text: item.name,
            label: item.name,
            value: item.id,
            deptId: item.departmentId,
          };
        });
        console.log('this.pData', this.pData);
        this.appStore.updatePersonData(this.pData);
      });
      getPDeptList().then((res) => {
        this.dData = res.data.map((item) => {
          return {
            text: item.name,
            label: item.name,
            value: item.departmentId,
            parentId: item.parentId,
          };
        });
        this.appStore.updateDeptData(this.dData);
      });
    },
    // 跳转
    onClick(item) {
      // url参数
      let obj = {
        bathroomLockerId: item.bathroomLockerId,
      };
      let str = this.$util.jsonToUrlParam(obj);
      this.onLocation(`/pages/locker/detail?${str}`);
    },
    // swiper
    onTabchange(e) {
      let index = e.target.current || e.detail.current;
      this.current = index;
    },
    // 跳转页面
    onLocation(url) {
      uni.navigateTo({
        url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: calc(100vh - var(--window-top));
  background: #f2f2f2;
  position: relative;
  display: flex;
  flex-direction: column;
  :deep(.uni-searchbar) {
    padding: 0;
  }
  :deep(.uni-forms) {
    .uni-forms-item__label {
      font-size: 28rpx;
      font-weight: 600;
      color: #333333;
    }
    .uni-easyinput__content {
      background: #f5f5f5 !important;
      .uni-easyinput__content-input {
        height: 33px;
      }
    }
    .uni-select {
      background: #f5f5f5;
    }
    .uni-date-x {
      background: #f5f5f5;
    }
    .uni-data-tree {
      background: #f5f5f5;
    }
  }
  .filterBtn {
    display: flex;
    align-items: center;
    .r {
      background: #6bb0ff;
      border-radius: 70rpx 0rpx 0rpx 70rpx;
    }
    .s {
      background: #5293ff;
      border-radius: 0rpx 70rpx 70rpx 0rpx;
    }
    .btn {
      width: 50%;
      font-size: 28rpx;
      color: #ffffff;
      margin: 0;
      &::after {
        border: none;
      }
    }
  }
  .listBox {
    flex: 1 1 auto;
    position: relative;
    .swiper-box {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
    }
    .box {
      margin: 0 36rpx;
    }
    .item {
      line-height: 1;
      margin-bottom: 30rpx;
      background: #ffffff;
      border-radius: 20rpx;
      box-shadow: 0rpx 4rpx 17rpx 0rpx rgba(0, 0, 0, 0.06);
      letter-spacing: 4rpx;
      position: relative;
      &:last-child {
        margin-bottom: 0;
      }
      .t {
        padding: 24rpx 34rpx 16rpx;
        border-bottom: 2rpx solid #ebebeb;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .l {
          font-size: 32rpx;
          color: #333333;
          line-height: 38rpx;
        }
        .r {
          font-size: 32rpx;
          color: #505050;
          line-height: 38rpx;
          display: flex;
          align-items: center;
          .point {
            width: 12rpx;
            height: 12rpx;
            margin-right: 6rpx;
            background: #ffb93b;
            border-radius: 50%;
          }
        }
      }
      .b {
        padding: 26rpx 34rpx 32rpx;
        .bItem {
          margin-bottom: 16rpx;
          display: flex;
          align-items: baseline;
          &:last-child {
            margin-bottom: 0;
          }
          .name {
            width: 35%;
            font-size: 28rpx;
            color: #989898;
            line-height: 33rpx;
          }
          .value {
            flex: 1;
            font-size: 28rpx;
            color: #505050;
            line-height: 33rpx;
          }
        }
      }
      .status {
        font-size: 24rpx;
        font-weight: 400;
        color: #fff;
        padding: 8rpx 20rpx;
        background: #409eff;
        border-radius: 20rpx;
        position: absolute;
        top: 106rpx;
        right: 42rpx;
        &.warn {
          background: #e6a23c;
        }
      }
    }
  }
}
</style>
